<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app">
        {{str}}
        <!--原生-->
        <button onclick="fn()">点我呀</button>
        <!--v-bind-->
        <button v-bind:onclick="fn()">点我呀</button>
        <button v-bind:onclick="'fn()'">点我呀</button>
        <!--v-on-->
        <!--语句    -->
        <button v-on:click="str+='!'">点我呀</button>
        <!--语句:调用函数，传递参数方便    -->
        <button v-on:click="changeStr()">点我呀</button>
        <!--函数：事件触发会调用该函数    -->
        <button v-on:click="changeStr">点我呀</button>
        <hr/>
        <!--    简写：-->
        <button @click="changeStr">简写</button>
        <hr/>
        <button @click="alert(str)">注意：如果语句调用的是函数，那么需要查看函数是否为自定义的（内置函数不支持）</button>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            str: "my"
        },
        methods: {
            changeStr() {
                this.str += "!";
            },
            fn() {
                console.log("methods->fn", this)
                return "fn()";
            },
            alert(str){
                alert(str);
            }
        }
    })

    function fn() {
        console.log("fn", this)
    }
</script>
</html>